<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Basic Page Needs
    ================================================== -->
    <meta charset="utf-8">
    <!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>职到 - 职位，手到擒来！</title>
    <meta name="description" content="KIDS is a clean, modern, and fully responsive Html Template. Take your Startup business website to the next level. It is designed for kindergarten, childcare, homeschooling, school, learning, playground businesses or any type of person or business who wants to showcase their work, services and professional way.">
    <meta name="keywords" content="business, care, childcare, children, clean, corporate, happykids, homeschool, kids, kindergarten, playground, responsive, school, learning">
    <meta name="author" content="rometheme.net">

    <!-- ==============================================
    Favicons
    =============================================== -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

    <!-- ==============================================
    CSS VENDOR
    =============================================== -->
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/owl.theme.default.min.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/magnific-popup.css">
    <link rel="stylesheet" type="text/css" href="css/vendor/animate.min.css">

    <!-- ==============================================
    Custom Stylesheet
    =============================================== -->
    <link rel="stylesheet" type="text/css" href="css/style(qt).css" />

    <script src="js/vendor/modernizr.min.js"></script>
    <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style2.css">
    <script type="text/javascript" src="/js/script(biaoge).js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>

    <style>
        *{
            text-align: center;
        }
        .my ul{

        }
        .my #nav1 li{
            display: inline;
            width: 30%;
            text-decoration: none;
            padding-left: 50px;
            padding-right: 50px;
            font-size: x-large;
            font-family: 华光综艺_CNKI;
        }
        li:hover{
            color: #F1C22E;
        }
        .active{
            color:#F1C22E;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- LOAD PAGE -->
    <div class="animationload">
        <div class="loader"></div>
    </div>

    <!-- BACK TO TOP SECTION -->
    <a href="#0" class="cd-top cd-is-visible cd-fade-out">Top</a>

    <!-- TOPBAR -->
    <div class="topbar">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-sm-8 col-md-6">
                    <div class="info">
                        <div class="info-item">
                            <i class="fa fa-phone"></i> +62 7144 3300
                        </div>
                        <div class="info-item">
                            <i class="fa fa-envelope-o"></i> <a href="mailto:support@zhidao.com" title="">support@zhidao.com</a>
                        </div>
                        <div class="info-item">
                            欢迎用户：<span id="demo"></span> 登陆
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-6">
                    <div class="sosmed-icon pull-right d-inline-flex">
                        <a class="navbar-brand" href="my.html" >
                            <img src="images/wode.png" alt="">
                        </a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a class="navbar-brand" href="help1.html">
                            <img src="images/help.png" alt="">
                        </a>
                        <a class="navbar-brand" href="login3.html">
                            <img src="images/login.jpg" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <div class="navbar-main" style="height:70px;">
        <div class="container">
            <nav id="navbar-example" class="navbar navbar-expand-lg">
                <a class="navbar-brand" href="index1.html">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="images/logo.png" alt="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="images/slogan.png" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="index1.html">首页</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="Aworkcompany.html">工作</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="work_post.html">投递</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="forum.html">花果山论坛</a>
                        </li>
                    </ul>
                </div>
            </nav> <!-- -->
        </div>
    </div>
    <!-- 此处是内容 -->
    <div class="main" >
        <br><br><br>

        <div id="div1">
            <div class="row">
                <div class="row popup-gallery gutter-5"  >
                    <!--            分类筛选页-->
                    <div class="col-sm-12 col-md-12 col-lg-8" style="padding-left: 150px">

                        <ul class="select" style="width:90%;font-size: 16px;">
                            <li>
                                <dl>
                                    <dt>涵盖范围：</dt><dd></dd>
                                </dl>
                            </li>
                            <li class="select-list"  style="height:50px;">
                                <dl id="select1">
                                    <dt>城 市：</dt>
                                    <dd v-for="(item,index) in addList1"><a href="###">{{item.job_add}}</a></dd>
                                </dl>
                            </li>
                            <li class="select-list" style="height:50px;">
                                <dl id="select2">
                                    <dt>领 域：</dt>
                                    <dd v-for="(item,index) in typeList1"><a href="###">{{item.company_type}}</a></dd>
                                </dl>
                            </li>
                            <li class="select-list" style="height:50px;">
                                <dl id="select3">
                                    <dt>技 术：</dt>
                                    <dd v-for="(item,index) in typeList2"><a href="###">{{item.job_type}}</a></dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                    <!--广告位图片-->
                    <div class="col-xs-12 col-md-6 col-lg-4" v-for="(item,index) in adList">
                        <div>
                            <a :href="item.link" title="Gallery #1">
                                <img :src="'http://localhost:8080/'+item.picture" alt="" class="img-fluid">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br><br><br>
        <!--标签页-->
        <div class="my" >
            <nav id="nav1">
                <ul>
                    <li class="active">为你匹配</li>
                    <li >最新职位</li>
                    <li >热门公司</li>
                </ul>
            </nav>
            <!--内容部分HTML代码-->
            <div id="container">
                <!--为你匹配-->
                <div class="tab">
                    <div>
                        <div class="container">
                            <div style="font-size:15px;" style="float:left;"><br>
                                <div class="author-box" style="margin-top:10px" v-for="(item,index) in positionList" @click="lookUp(item.position_id)">
                                    <div style="float: left">
                                        <div class="media">
                                            <img :src="'http://localhost:8080/'+item.company_img_url" alt="" class="img-fluid">
                                        </div>
                                        <div class="body" style="margin-left: 400px">
                                            <h3 class="media-left" style="font-family: 华光敦韵宋_CNKI;font-size:24px;font-weight: bolder;color:#ac2925">{{item.job}}</h3>
                                            <h4 class="media-left" style="font-family: 华光敦韵宋_CNKI;color:black;font-size:20px;font-weight: bold;margin-left: 50px"><span style="color:#F1C22E">{{item.job_pay}}&nbsp;&nbsp;&nbsp;经验：{{item.experience}}&nbsp;/&nbsp;{{item.education}}</span></h4>
                                            <h4 class="media-left" style="font-family: 华光敦韵宋_CNKI;color:black;font-size:20px;font-weight: bold;">{{item.job_type}}</h4>
                                        </div>
                                    </div>
                                    <div style="margin-left: 700px">
                                        <div class="body">
                                            <h3 style="font-family: 华光敦韵宋_CNKI;color:black;font-size:20px;font-weight:bolder;color:#ac2925">{{item.company_name}}</h3>
                                            <h4 style="font-family: 华光敦韵宋_CNKI;color:black;font-size:20px;font-weight: bold">&nbsp;&nbsp;&nbsp;{{item.company_scale}}&nbsp;&nbsp;&nbsp;{{item.job_add}}</h4>
                                            <a href="positionItem.html" class="btn btn-secondary" style="font-size: 20px" @click="lookUp(item.position_id)">查看详情</a>
                                        </div>
                                    </div>
                                    <div style="float: bottom;margin-left: 170px">
                                        <div class="body" style="font-family: 华光敦韵宋_CNKI;font-size: 18px">
                                            <p  class="media-left" style="font-family: 华光敦韵宋_CNKI;font-weight: bold;color:black;width: 400px">{{item.company_slogan}}</p>
                                            <p  class="media-left" style="font-family: 华光敦韵宋_CNKI;width: 400px;color:black;">发布时间：{{item.create_date}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br><br>
                    </div>
                </div>
                <!--最新职位-->
                <div class="tab">
                    <div>
                        <div class="container">
                            <div style="font-size:15px;" style="float:left;"><br>
                                <div class="author-box" style="margin-top:10px" v-for="(item,index) in positionList1" @click="lookUp(item.position_id)">
                                    <div style="float: left">
                                        <div class="media">
                                            <img :src="'http://localhost:8080/'+item.company_img_url" alt="" class="img-fluid">
                                        </div>
                                        <div class="body" style="margin-left: 400px">
                                            <h3 class="media-left" style="font-family: 华光敦韵宋_CNKI;font-size:24px;font-weight: bolder;color:#ac2925">{{item.job}}</h3>
                                            <h4 class="media-left" style="font-family: 华光敦韵宋_CNKI;color:black;font-size:20px;font-weight: bold;margin-left: 50px"><span style="color:#F1C22E">{{item.job_pay}}&nbsp;&nbsp;&nbsp;经验：{{item.experience}}&nbsp;/&nbsp;{{item.education}}</span></h4>
                                            <h4 class="media-left" style="font-family: 华光敦韵宋_CNKI;color:black;font-size:20px;font-weight: bold;">{{item.job_type}}</h4>
                                        </div>
                                    </div>
                                    <div style="margin-left: 700px">
                                        <div class="body">
                                            <h3 style="font-family: 华光敦韵宋_CNKI;color:black;font-size:20px;font-weight:bolder;color:#ac2925">{{item.company_name}}</h3>
                                            <h4 style="font-family: 华光敦韵宋_CNKI;color:black;font-size:20px;font-weight: bold">&nbsp;&nbsp;&nbsp;{{item.company_scale}}&nbsp;&nbsp;&nbsp;{{item.job_add}}</h4>
                                            <a href="positionItem.html" class="btn btn-secondary" style="font-size: 20px" @click="lookUp(item.position_id)">查看详情</a>
                                        </div>
                                    </div>
                                    <div style="float: bottom;margin-left: 170px">
                                        <div class="body" style="font-family: 华光敦韵宋_CNKI;font-size: 18px">
                                            <p  class="media-left" style="font-family: 华光敦韵宋_CNKI;font-weight: bold;color:black;width: 400px">{{item.company_slogan}}</p>
                                            <p  class="media-left" style="font-family: 华光敦韵宋_CNKI;width: 400px;color:black;">发布时间：{{item.create_date}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><br><br>
                    </div>
                </div>
                <!--热门公司-->
                <div class="tab">
                    <div>
                        <div class="container">
                            <div style="font-size:15px;" style="float:left;"><br>
                                <div class="author-box" style="margin-top:10px"  v-for="(item,index) in positionList2" @click="lookUp1(item.company_id)">
                                    <div style="float: left">
                                        <div class="media">
                                            <img :src="'http://localhost:8080/'+item.company_img_url" alt="" class="img-fluid">
                                        </div>
                                        <div class="body" style="margin-left: 400px">
                                            <h3 class="media-left" style="font-family: 华光敦韵宋_CNKI;font-size:24px;font-weight: bolder;color:#ac2925;margin-left: 50px">&nbsp;&nbsp;&nbsp;{{item.company_name}}</h3>
                                            <h4 class="media-left" style="font-family: 华光敦韵宋_CNKI;font-size:20px;font-weight: bold;margin-left: 50px;color:black;"><span style="color:#F1C22E">{{item.company_type}}</span></h4>

                                        </div>
                                    </div>
                                    <div style="margin-left: 700px">
                                        <div class="body">
                                            <h4 style="font-family: 华光敦韵宋_CNKI;font-weight: bold;font-size:20px;color:black;">&nbsp;&nbsp;&nbsp;{{item.company_scale}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{item.job_add}}</h4>
                                            <a href="Companyposition.html" class="btn btn-secondary" style="font-size: 20px;font-size:20px;">查看详情</a>
                                        </div>
                                    </div>
                                    <div style="float: bottom;margin-left: 170px">
                                        <div class="body">
                                            <p  class="media-left" style="font-family: 华光敦韵宋_CNKI;color:black;font-size:20px;font-weight: bold;width: 400px">{{item.company_slogan}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 此处是底部栏 -->
    <div class="footer" data-background="images/bg.jpg">
        <div class="content-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3 col-md-3">
                        <div class="footer-item">
                            <img src="images/logo.png" alt="logo bottom" class="logo-bottom">
                            <div class="spacer-30"></div>
                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
                            <a href="#"><i class="fa fa-angle-right"></i> Read More</a>
                        </div>
                    </div>

                    <div class="col-sm-3 col-md-3">
                        <div class="footer-item">
                            <div class="footer-title">
                                Contact Info
                            </div>
                            <ul class="list-info">
                                <li>
                                    <div class="info-icon">
                                        <span class="fa fa-map-marker"></span>
                                    </div>
                                    <div class="info-text">99 S.t Jomblo Park Pekanbaru 28292. Indonesia</div> </li>
                                <li>
                                    <div class="info-icon">
                                        <span class="fa fa-phone"></span>
                                    </div>
                                    <div class="info-text">(0761) 654-123987</div>
                                </li>
                                <li>
                                    <div class="info-icon">
                                        <span class="fa fa-envelope"></span>
                                    </div>
                                    <div class="info-text">info@yoursite.com</div>
                                </li>
                                <li>
                                    <div class="info-icon">
                                        <span class="fa fa-clock-o"></span>
                                    </div>
                                    <div class="info-text">Mon - Sat 09:00 - 17:00</div>
                                </li>
                            </ul>

                        </div>
                    </div>

                    <div class="col-sm-3 col-md-3">
                        <div class="footer-item">
                            <div class="footer-title">
                                Useful Links
                            </div>

                            <ul class="list">
                                <li><a href="index2.html" title="About us">关于我们</a></li>
                                <li><a href="help1.html" title="Contact Us">帮助</a></li>
                            </ul>

                        </div>
                    </div>

                    <div class="col-sm-3 col-md-3">
                        <div class="footer-item">
                            <div class="footer-title">
                                Get in Touch
                            </div>
                            <p>Lit sed The Best in dolor sit amet consectetur adipisicing elit sedconsectetur adipisicing</p>
                            <div class="sosmed-icon d-inline-flex">
                                <a href="#" class="fb"><i class="fa fa-facebook"></i></a>
                                <a href="#" class="tw"><i class="fa fa-twitter"></i></a>
                                <a href="#" class="ig"><i class="fa fa-instagram"></i></a>
                                <a href="#" class="in"><i class="fa fa-linkedin"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="fcopy">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <p class="ftex">Copyright 2019 &copy; <span class="color-primary">Kids HTML Template</span>. Designed by <span class="color-primary">Rometheme.</span></p>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
            var x = window.localStorage.getItem("applicant_name");
            document.getElementById("demo").innerHTML = x;
    </script>
    <!--标签页-->
    <script>
        window.onload=function () {
            var nav=document.getElementById('nav1');
            var oNav=nav.getElementsByTagName('li');

            var container=document.getElementById('container');
            var oDiv=container.getElementsByClassName('tab');
            for(var i=0;i<oNav.length;i++){
                oNav[i].index=i;
                oNav[i].onclick=function () {
                    for(var i=0;i<oNav.length;i++){
                        oNav[i].className='';
                        oDiv[i].style.display="none";
                    }
                    this.className='act';
                    oDiv[this.index].style.display="block"
                }
                for(var m=1;m<oNav.length;m++){
                    oNav[m].className='';
                    oDiv[m].style.display="none";
                }
            }
        };
    </script>
    <script>
        new Vue({
            el:"#app",
            data:{
                positionList:[],
                positionList1:[],
                positionList2:[],
                typeList1:[],
                addList1:[],
                typeList2:[],
                adList:[]
            },
            methods:{
                lookUp:function (position_id){
                    window.localStorage.setItem("position_id",position_id);
                    // alert(position_id)
                    location.href="positionItem.html"
                },
                lookUp1:function (company_id){
                    window.localStorage.setItem("company_id",company_id);
                    // alert(company_id)
                    location.href="Companyposition.html"
                }
            },
            mounted(){
                _this = this
                var applicant_id = window.localStorage.getItem("applicant_id");
                console.log("applicant_id:"+applicant_id)
                //查询帖子的信息
                axios.get('/position/list2')
                    .then(function (response) {
                        _this.positionList = response.data;
                        console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                axios.get('/position/list4')
                    .then(function (response) {
                        _this.positionList1 = response.data;
                        console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                axios.get('/position/list5')
                    .then(function (response) {
                        _this.positionList2 = response.data;
                        console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                axios.get('/company/typelist1')
                    .then(function (response) {
                        _this.typeList1 = response.data;
                        console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                axios.get('/company/addlist1')
                    .then(function (response) {
                        _this.addList1 = response.data;
                        console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                axios.get('/position/typelist1')
                    .then(function (response) {
                        _this.typeList2 = response.data;
                        console.log(response.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                //广告
                axios.get('/ad/ad')
                    .then(function (response) {
                    _this.adList=response.data;
                    console.log(response.data);
                })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        })
    </script>
    <!-- JS VENDOR -->
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="js/vendor/owl.carousel.js"></script>
    <script src="js/vendor/jquery.magnific-popup.min.js"></script>
    <script src="js/vendor/isotope.pkgd.min.js"></script>
    <script src="js/vendor/imagesloaded.pkgd.min.js"></script>

    <!-- SENDMAIL -->
    <script src="js/vendor/validator.min.js"></script>
    <script src="js/vendor/form-scripts.js"></script>

    <script src="js/script(qt).js"></script>
</div>
</body>
</html>